<template lang="">
  <div>
    <el-dialog
      title="Equipment Details"
      :visible="visible"
      width="62%"
      @close="$emit('warehouse_gate_dall', false)"
      center
    >
      <div>
        <!-- Device Number---总订单数 -->
        <div class="topTitleBar">
          <div>
            <div class="dialog_content_item">
              Equipment Serial Number:
              <span style="margin-left:5px">{{ useDetail.main.deviceNo }}</span>
            </div>
            <div class="dialog_content_item">
              Equipment Name:
              <span style="margin-left:5px">{{
                useDetail.main.deviceName
              }}</span>
            </div>
            <div class="dialog_content_item">
              Equipment Address:
              <span style="margin-left:5px">{{ useDetail.main.address }}</span>
            </div>
            <div class="dialog_content_item">
              Equipment Usage Time:
              <span style="margin-left:5px">{{
                formatSeconds(useDetail.extend.serverTime) || 0
              }}</span>
            </div>
            <div class="dialog_content_item">
              Number of Battery Swaps(times):
              <span style="margin-left:5px">{{
                useDetail.extend.totalOrder || 0
              }}</span>
            </div>
          </div>
          <div>
            <div class="dialog_content_item">
              Package Cost($):
              <span style="margin-left:5px">{{
                useDetail.extend.totalMealMoney || 0
              }}</span>
            </div>
            <div class="dialog_content_item">
              Number of Battery Swap Orders(times):
              <span style="margin-left:5px">{{
                useDetail.extend.totalMealOrder || 0
              }}</span>
            </div>
            <div class="dialog_content_item">
              24-Hour Battery Swap Usage Rate(%):
              <span style="margin-left:5px">{{
                useDetail.extend.useRateDay || 0
              }}</span>
            </div>
            <div class="dialog_content_item">
              Calculation Method for Battery Swap Usage Rate:
            </div>
            <div style="font-size:12px;color:#777;">
              Within 24 hours, the number of battery swap orders / the number of
              bay doors * 3
            </div>
          </div>
        </div>
        <!-- 设备Status -->
        <div class="textTwo">
          <div class="textTwoTit">Equipment Status：</div>
          <div class="textDisplay">
            <div class="dialog_content_items">
              Power:
              <span style="margin-left:5px"
                >{{ Number(useDetail.main.power).toFixed(2) || 0 }}W</span
              >
            </div>
            <div class="dialog_content_items">
              Voltage:
              <span style="margin-left:5px"
                >{{ Number(useDetail.main.voltage).toFixed(2) || 0 }}V</span
              >
            </div>
            <div class="dialog_content_items">
              Electricity:
              <span style="margin-left:5px"
                >{{ Number(useDetail.main.electricity).toFixed(2) || 0 }}A</span
              >
            </div>
            <div class="dialog_content_items">
              Fire Alarm:
              <span
                style="margin-left:5px"
                :class="useDetail.anomalousEvent.fire === 1 ? 'Cbg_span_3' : ''"
                >{{ useDetail.anomalousEvent.fire === 1 ? "Yes" : "No" }}</span
              >
            </div>
            <div class="dialog_content_items">
              Smoke Detector:
              <span
                style="margin-left:5px"
                :class="
                  useDetail.anomalousEvent.smoke === 1 ? 'Cbg_span_3' : ''
                "
                >{{ useDetail.anomalousEvent.smoke === 1 ? "Yes" : "No" }}</span
              >
            </div>
            <div class="dialog_content_items">
              Water Sensor:
              <span
                style="margin-left:5px"
                :class="
                  useDetail.anomalousEvent.water === 1 ? 'Cbg_span_3' : ''
                "
                >{{ useDetail.anomalousEvent.water === 1 ? "Yes" : "No" }}</span
              >
            </div>
            <div class="dialog_content_items">
              Emergency Stop:
              <span
                style="margin-left:5px"
                :class="
                  useDetail.anomalousEvent.urgencyStop === 1 ? 'Cbg_span_3' : ''
                "
                >{{
                  useDetail.anomalousEvent.urgencyStop === 1 ? "Yes" : "No"
                }}</span
              >
            </div>
            <div class="dialog_content_items">
              Lightning Strike:
              <span
                style="margin-left:5px"
                :class="
                  useDetail.anomalousEvent.lightning === 1 ? 'Cbg_span_3' : ''
                "
                >{{
                  useDetail.anomalousEvent.lightning === 1 ? "Yes" : "No"
                }}</span
              >
            </div>
          </div>
        </div>
        <!-- 仓位信息 -->
        <div class="engaged">
          <!-- <div class="engaged_title">
          <div class="content">仓位</div>
          <div class="cell_state">
            <div class=""> <img class="imgss" src="/public/images/battery1.png" alt="">没Battery</div>
            <div class=""><img class="imgss" src="/public/images/battery2.png" alt="">有Battery</div>
            <div class=""><img class="imgss" src="/public/images/battery3.png" alt="">已充满</div>
            <div class=""><img class="imgss" src="/public/images/battery4.png" alt="">异常</div>
          </div>
        </div> -->
          <el-radio-group
            fill="#9a9c1b"
            class="engaged_group"
            v-model="checkboxGroup"
            @change="buttonFn(checkboxGroup)"
          >
            <!--  v-for="item in useDetail.engaged" -->
            <el-radio-button
              class="engaged_item"
              :class="'bg_span_' + item.status"
              v-for="item in list"
              :label="item.cabinetNo"
              :key="item.cabinetNo"
            >
              <div class="quanButton">
                <!-- 左 -->
                <div class="zuobian">
                  <div class="zuobianOne" :class="'Bbg_span_' + item.status">
                    No.{{ item.cabinetNo }}
                  </div>
                  <div class="zuobianImg">
                    <img
                      :src="
                        item.status === 0
                          ? '/public/images/hui.png'
                          : item.status === 3
                          ? '/public/images/hong.png'
                          : item.status === 4
                          ? '/public/images/fen.png'
                          : item.status === 2
                          ? '/public/images/lu100.png'
                          : item.status === 1 &&
                            item.soc >= 95 &&
                            item.chargeElectricity == 0
                          ? '/public/images/lan100.png'
                          : item.status == 1 && item.soc < 20
                          ? '/public/images/lan0.png'
                          : item.status == 1 && item.soc < 40
                          ? '/public/images/lan20.png'
                          : item.status == 1 && item.soc < 60
                          ? '/public/images/lan40.png'
                          : item.status == 1 && item.soc < 80
                          ? '/public/images/lan60.png'
                          : item.status == 1 && item.soc >= 80 && item.soc < 95
                          ? '/public/images/lan80.png'
                          : item.status == 1 && item.soc >= 95
                          ? '/public/images/lan100.png'
                          : ''
                      "
                      alt=""
                    />
                  </div>
                </div>

                <!-- 右 -->
                <div class="youbian" :class="'Cbg_span_' + item.status">
                  <div class="youbianOne">
                    Cabinet Door Status：{{
                      item.cabinetStatus === 1 ? "Open" : "Close"
                    }}
                  </div>
                  <p>
                    <span class="youbianTwo">Enable Status：</span>
                    <el-switch
                      v-model="item.disableStatus"
                      :active-value="1"
                      :inactive-value="0"
                      active-color="#13ce66"
                      @click.native.prevent="switchChange(item)"
                      disabled
                      inactive-color="#ff4949"
                      class="youbianTwoSw"
                    ></el-switch>
                    {{ item.disableStatus === 1 ? "Open" : "Close" }}
                  </p>
                  <div>
                    Battery：{{
                      item.status === 0
                        ? "No Battery"
                        : item.status === 1 &&
                          item.soc >= 95 &&
                          item.chargeElectricity == 0
                        ? "Leave Unused Charge"
                        : item.status === 1
                        ? "Have Battery"
                        : item.status === 2
                        ? "Be Full Of"
                        : "Malfunction"
                    }}
                  </div>
                  <p>Cabinet Door Temperature：{{ item.temperature || 0 }}℃</p>
                  <p>Battery Charge Level：{{ item.soc || 0 }}%</p>
                  <p>
                    Charging Voltage：{{
                      (item.chargeVoltage / 10).toFixed(2) || 0
                    }}V
                  </p>
                  <p>
                    Charging Electricity：{{
                      (item.chargeElectricity / 100).toFixed(2) || 0
                    }}A
                  </p>

                  <!-- <div v-for="i in list" :key="i.id">
           {{item.id === i.id ? 'Battery电量：' + i.soc + '%' : ''}}
            </div> -->
                </div>
              </div>
              <p class="quanButtonBt" :class="'Cbg_span_' + item.status">
                {{ item.goodsNo || "Battery Number None" }}
              </p>
              <div class="quanButtonTwo">
                <div
                  class="quanButtonTwoOne"
                  :class="'Bbg_span_' + item.status"
                >
                  {{
                    item.status == 0
                      ? "Leave Unused"
                      : item.status === 1 &&
                        item.soc >= 95 &&
                        item.chargeElectricity == 0
                      ? "Leave Unused Charge"
                      : item.status == 1
                      ? "Charging"
                      : item.status == 2
                      ? "Be Full Of"
                      : item.status == 3
                      ? "Abnormal"
                      : item.status == 4
                      ? "Illegality Battery"
                      : "--"
                  }}
                </div>

                <div
                  :class="
                    item.communication == 1 &&
                    item.chargerOnline == 1 &&
                    item.chargingStatus == 1
                      ? 'Cbg_span_1'
                      : 'Cbg_span_3'
                  "
                >
                  {{
                    item.communication == 1 &&
                    item.chargerOnline == 1 &&
                    item.chargingStatus == 1
                      ? "Normal"
                      : "Abnormal"
                  }}
                </div>
                <div
                  class="quanButtonTwoThree"
                  :class="
                    item.communication == 1 &&
                    item.chargerOnline == 1 &&
                    item.chargingStatus == 1
                      ? 'Cbg_span_1'
                      : 'Cbg_span_3'
                  "
                >
                  {{
                    item.communication == 0
                      ? "Board Communication Failure"
                      : item.chargerOnline == 0
                      ? "Battery Charger Offline"
                      : item.chargingStatus == 0
                      ? "Battery Not Being Charged"
                      : ""
                  }}
                </div>
              </div>
              <div class="quanButtonThree" :class="'Bbg_span_' + item.status">
                <div
                  class="quanButtonThreeOne"
                  @click="buttonClick(item, '开仓')"
                >
                  Open Door
                </div>
                <div
                  class="quanButtonThreeTwo"
                  @click="buttonClick(item, '充电')"
                >
                  Charge
                </div>
                <div
                  class="quanButtonThreeThree"
                  @click="buttonClick(item, '停充')"
                >
                  Stop Charge
                </div>
              </div>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <p style="margin-bottom:10px">
        Device Position Coordinates Longitude：{{
          useDetail.main.lng
        }}
        Latitude：{{ useDetail.main.lat }}
      </p>
      <baidu-map
        style="width:100%;height:350px"
        class="map-wrap"
        :center="mapData.center"
        :zoom="mapData.zoom"
        @ready="mapHandler"
      ></baidu-map>

      <!-- <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="buttonClick('开仓')">开仓</el-button>
      <el-button type="primary" @click="buttonClick('充电')">充电</el-button>
      <el-button type="info" @click="buttonClick('停充')">停充</el-button>
      <el-button @click="$emit('update:visible', false)">Cancel</el-button>
    </span> -->
    </el-dialog>
    <!-- EnableForbidden弹框 -->
    <el-dialog width="450px" title="Audit Remarks" :visible.sync="chcekShow">
      <el-form :model="chcekData" :rules="chcekRules" ref="chcekForm">
        <el-form-item label="Audit Remarks" label-width="80px" prop="remark">
          <el-input type="textarea" v-model="chcekData.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chcekShow = false">Cancel</el-button>
        <el-button type="primary" @click="chcekFn('chcekForm')"
          >Confirm</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import baidumap from "../../js/baidumap";
export default {
  data() {
    return {
      chcekShow: false,
      chcekData: {
        id: "",
        status: null, //0 Forbidden 1恢复Enable
        remark: "" //审核Remarks
      },
      chcekRules: {
        remark: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      checkboxGroup: "",
      list: [],
      fag: true,
      timer: null,
      id: "",
      numSS: "",
      //地图Data
      mapData: {
        //中心坐标
        center: { lng: 0, lat: 0 },
        //缩放级别
        zoom: 18
      },
      //BMap类
      BMap: null,
      //地图对象
      map: null
    };
  },
  destroyed() {
    this.fag = false;
    clearInterval(this.timer);
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    useDetail: {
      type: Object,
      required: true
    },
    res: {}
  },
  mounted() {
    // this.useDetail.engaged.forEach((item) => {
    let spanItem = document.getElementsByTagName(
      "el-radio-group>el-radio-group"
    );
    console.log(2222222222, this.useDetail, this.useDetail.lng, this.res);

    // });
    this.id = this.res.id;
    this.getData();
    // this.timer = setInterval(() => {
    //   if (this.fag) {
    //     this.getData();
    //   }
    // }, 3000)
  },
  watch: {
    visible: {
      handler: function(status) {
        if (!status) {
          this.checkboxGroup = "";
        }
      },
      immediate: true, //关键
      deep: true
    }
  },
  methods: {
    // 拿到仓位号
    buttonFn(i) {
      console.log(567, i);
      this.numSS = i;
    },

    buttonClick(item, value) {
      console.log(value, "123");
      if (this.useDetail.deviceStatus == 2) {
        this.$message({
          message: "设备已Offline！",
          type: "warning"
        });
        return;
      } else if (this.useDetail.deviceStatus == 3) {
        this.$message({
          message: "设备已故障！",
          type: "warning"
        });
        return;
      }
      var openType = "";
      var openDoors = {};
      if (value === "开仓") {
        openType = 0;
      } else if (value === "充电") {
        openType = 1;
      } else if (value === "停充") {
        openType = 2;
      }
      this.checkboxGroup = item.cabinetNo;

      openDoors = {
        deviceNo: this.useDetail.main.deviceNo, //Device Number
        handlerType: openType, // 0开门 1开电 2关电
        cabinetNo: this.checkboxGroup, //柜子号
        batteryNo: item.goodsNo || ""
      };

      if (this.checkboxGroup) {
        this.$confirm(
          "是否要为" + this.checkboxGroup + "号仓" + value + "?",
          "Hint",
          {
            confirmButtonText: "Confirm",
            cancelButtonText: "Cancel",
            type: "warning"
          }
        )
          .then(async () => {
            const res = await this.apis.deviceDoorPowerOns(openDoors);
            console.log("开仓---", res);
            if (res.code == 200) {
              this.$message({
                message: value + "Success",
                type: "success"
              });
              this.$emit("update:visible", true);
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
            openType = "";
            openDoors = {};
          })
          .catch(err => {
            this.$message({
              message: "Already Cancel",
              type: "error"
            });
          });
      } else {
        this.$message({
          message: "Please Select柜子号！",
          type: "warning"
        });
      }
    },

    selected() {
      // console.log("checkboxGroup---", this.checkboxGroup);
      // engaged.map(item => {
      // 	checkboxGroup.forEach(value => {
      // 		console.log(value);
      // 		if (item.cabinetNo == value) {
      // 			item.checked = true
      // 		} else {
      // 			item.checked = false
      // 		}
      // 	})
      // 	return item
      // })
      // console.log("engaged---", engaged);
      // console.log("checkboxGroup-----", checkboxGroup);
    },

    formatSeconds(value) {
      var theTime1 = parseInt(value); // 需要转换的时间分钟
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天

      if (theTime1 > 60) {
        theTime2 = parseInt(theTime1 / 60);
        theTime1 = parseInt(theTime1 % 60);
        if (theTime2 > 24) {
          // 大于24小时
          theTime3 = parseInt(theTime2 / 24);
          theTime2 = parseInt(theTime2 % 24);
        }
      }
      var result = "";
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分钟";
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    },
    async getData() {
      var res = await this.apis.device_channelList({
        id: this.id
      });
      this.list = res.data || [];
    },

    async switchChange(item) {
      // 如果是关就写Remarks
      if (item.disableStatus == 1) {
        this.chcekShow = true;
        this.chcekData.id = item.id;
        this.chcekData.status = 0;
      } else {
        //Enable不用写Remarks
        this.chcekShow = false;
        const res = await this.apis.deviceCabinetDisableChange({
          id: item.id,
          status: 1, //Status   0Forbidden 1Enable
          remark: "" //审核Remarks
        });
        this.$message({
          type: res.code == 200 ? "success" : "error",
          message: res.msg
        });
        this.getData();
      }
    },
    // Enable---Forbidden---确认按钮
    chcekFn(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const res = await this.apis.deviceCabinetDisableChange({
            id: this.chcekData.id,
            status: this.chcekData.status, //Status   0Forbidden 1Enable
            remark: this.chcekData.remark || "" //审核Remarks
          });
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.getData();
          this.chcekShow = false;
          this.chcekData.remark = "";
        }
      });
    },

    // 地图
    //地图预处理
    async mapHandler({ BMap, map }) {
      setTimeout(async () => {
        if (this.businessId) {
          //可以在此处请求接口获取坐标Data
          await this.getMallBusinessDetail();
        }
        //Save百度地图类
        this.BMap = BMap;
        //Save地图对象
        this.map = map;

        // 按住鼠标右键，修改倾斜角和角度
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // map.setHeading(64.5);   //Setup地图旋转角度
        // map.setTilt(73);       //Setup地图的倾斜角度

        //如果一开始坐标存在(Edit的时候)
        // if (this.useDetail.main.lng && this.useDetail.main.lat) {

        //Setup坐标
        // 后端传的经纬度是国测的，转为百度经纬度
        let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
        let x = this.useDetail.main.lng;
        let y = this.useDetail.main.lat;
        let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
        let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
        this.useDetail.main.lng = z * Math.cos(theta) + 0.0065;
        this.useDetail.main.lat = z * Math.sin(theta) + 0.006;
        this.mapData.center.lng = this.useDetail.main.lng;
        this.mapData.center.lat = this.useDetail.main.lat;
        console.log(8888888);

        // }
        // else {
        //   console.log(999999999);
        //   //如果坐标不存在则动态获取Current浏览器坐标（创建的时候）
        //   let geolocation = new BMap.Geolocation()
        //   //获取Current的坐标（Employpromise 将异步转换为同步）
        //   await new Promise((resolve) => {
        //     geolocation.getCurrentPosition((r) => {
        //       this.mapData.center.lng = this.useDetail.lng =
        //         r.point.lng
        //       this.mapData.center.lat = this.useDetail.main.lat = r.point.lat
        //       resolve()
        //     })
        //   })
        // }
        //创建定位标记
        let marker = new BMap.Marker(
          new BMap.Point(this.useDetail.main.lng, this.useDetail.main.lat)
        );
        //将标记Add到地图上
        map.addOverlay(marker);
      }, 1500);
    }
  }
};
</script>

<style lang="scss">
.dialog_content_item {
  margin-bottom: 10px;
  font-size: 20px;
  display: flex;
  align-content: center;
  margin-right: 20px;
  // width: 50%;
}

.dialog_content_item > span {
  color: #3e8ef7;
  font-size: 20px;
}

.dialog_content_items {
  margin-bottom: 10px;
  font-size: 20px;
  display: flex;
  align-content: center;
  margin-right: 20px;
  width: 20%;
}

.dialog_content_items > span {
  color: #31d13e;
  font-size: 20px;
}

.engaged {
}

.engaged_group {
  display: flex;
  // justify-content: space-around;
  // font-size: 0.83rem;
  flex-wrap: wrap;
}

.engaged .engaged_title {
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
}

.engaged .cell_state {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.engaged .cell_state > div {
  margin-right: 20px;
}

.engaged .cell_state .incell::before,
.engaged .cell_state .nocell::before,
.engaged .cell_state .abound::before,
.engaged .cell_state .abnormal::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  background-color: #eb0c0c;
}

.engaged .cell_state .nocell::before {
  background-color: #e5e5e5;
}

.engaged .cell_state .abound::before {
  background-color: #37f31e;
}

.engaged .cell_state .abnormal::before {
  background-color: #2c39e7;
}

.engaged .engaged_title > div {
  font-size: 18px;
  display: flex;
  align-items: center;
}

.engaged .engaged_title .content {
  font-size: 22px;
  font-weight: 500;
  margin-right: 20px;
  font-weight: 700;
}

.engaged_item {
  width: 30%;
  min-width: 250px;
  color: #fff;
  font-size: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  overflow: hidden;
  border: none;
  transition: 500ms;
  border: 1px solid #777;

  .quanButton {
    display: flex;
    justify-content: space-between;
    align-items: center;

    // 左
    .zuobian {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10%;

      .zuobianOne {
        background: rgb(50, 120, 211);
        color: #fff;
        padding: 5px;
        font-size: 18px;
        border-radius: 8px;
        margin-bottom: 20px;
      }

      .zuobianImg {
        width: 40px;
        height: 70px;

        img {
          width: 100%;
        }
      }
    }

    // 右
    .youbian {
      font-size: 14px;
      line-height: 18px;
      text-align: left;
      position: relative;
      color: #000;

      .youbianOne {
      }

      .youbianTwo {
        border: none !important;

        .youbianTwoSw {
          transform: scale(0.9, 0.9);
        }
      }
    }
  }

  .quanButtonBt {
    color: #000;
    margin-top: 7px;
    border-bottom: 1px solid #666;
    padding-bottom: 5px;
  }

  .quanButtonTwo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    color: rgb(50, 120, 211);
    margin-bottom: 45px;

    .quanButtonTwoOne {
      background: rgb(50, 120, 211);
      color: #fff;
      padding: 5px;
      font-size: 15px;
      border-radius: 5px;
      margin-right: 10px;
    }

    .quanButtonTwoThree {
      margin-left: 20px;
    }
  }

  .quanButtonThree {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgb(50, 120, 211);
    color: #fff;
    padding: 5px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    right: 0;

    div {
      font-size: 14px;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      box-shadow: -2px -2px 5px #444, 2px 2px 5px #222, inset 2px 2px 4px #444;
    }

    .quanButtonThreeOne {
      color: rgb(50, 120, 211);
      background-color: rgb(226, 226, 50);
    }

    .quanButtonThreeTwo {
      background-color: green;
    }

    .quanButtonThreeThree {
      background-color: red;
    }
  }
}

.el-radio-button__inner {
  width: 100%;
  border: 1px solid #888889;
}

.bg_span_0 span {
  border: 1px solid #888889 !important;
}

.bg_span_1 span {
  border: 1px solid #008cd6 !important;
}

.bg_span_2 span {
  border: 1px solid #008cd6 !important;
}

.bg_span_3 span {
  border: 1px solid #eb0c0c !important;
}

.bg_span_4 span {
  border: 1px solid #f2a6aa !important;
}

// 颜色
.Bbg_span_0 {
  background-color: #888889 !important;
}

.Bbg_span_1 {
  background-color: #008cd6 !important;
}

.Bbg_span_2 {
  background-color: #008cd6 !important;
}

.Bbg_span_3 {
  background-color: #eb0c0c !important;
}

.Bbg_span_4 {
  background-color: #f2a6aa !important;
}

// 字体颜色
.Cbg_span_0 {
  color: #888889 !important;
}

.Cbg_span_1 {
  color: #008cd6 !important;
}

.Cbg_span_2 {
  color: #008cd6 !important;
}

.Cbg_span_3 {
  color: #eb0c0c !important;
}

.Cbg_span_4 {
  color: #f2a6aa !important;
}

.imgss {
  width: 50px;
  height: 50px;
}

#l-map {
  height: 250px;
  width: 100%;
}

.textDisplay {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.textTwo {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 20px;

  .textTwoTit {
    margin-bottom: 10px;
  }
}

.topTitleBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 修改elementUI-switch组件 disabled样式 */
.el-switch.is-disabled {
  opacity: 1;
}
.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
  cursor: pointer !important;
}
</style>
